<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue.set使用(对象)</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表</h2>
			<button @click="addSex">添加性别属性,默认值男</button>
			<ul>
				<li>id：{{person.id}}</li>
				<li>姓名：{{person.name}}</li>
				<li>年龄：{{person.age}}</li>
				<li v-if="person.sex">姓名：{{person.sex}}</li>
			</ul>
		</div>
		<script>
			Vue.config.productionTip = false;
			const vm = new Vue({
				el:'#root',
				data:{
					person:{id:'001','name':'马冬梅',age:29}
				},
				computed:{},
				methods:{
					addSex(){
						//Vue.set(this.person,'sex','男')
						// 无法往vm或 _data根上添加属性
						this.$set(this.person,'sex','女')
					}
				}
			});
		</script>
	</body>
</html>